<template>
  <div class="auto-page">
    <div class="header f-column">
      <div class="menu-list f-row">
        <div class="menu-list-item f-column">
          <van-icon name="setting-o" size="20px"/>
          <span>设置</span>
        </div>
        <div class="menu-list-item f-column">
          <van-icon name="qr" size="20px"/>
          <span>扫一扫</span>
        </div>
        <div class="menu-list-item f-column">
          <van-icon name="comment-o" size="20px"/>
          <span>消息</span>
        </div>
      </div>
      <div class="f-row" style="margin: 5px 15px;">
        <div class="my-avator">
          <van-image
            round
            width="50px"
            height="50px"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="my-msg">
          <span class="name">用户昵称</span>
          <div class="label-container">
            <van-tag color="#666666" round>超级会员</van-tag>
            <van-tag color="#df2000" round>大买家</van-tag>
          </div>
        </div>
      </div>
      <div class="f-row p-lr-5">
        <div class="coupon-collect-integral-item">
          <p class="coupon-collect-integral-item-number">2</p>
          <p class="coupon-collect-integral-item-title">优惠券</p>
        </div>
        <div class="coupon-collect-integral-item">
          <p class="coupon-collect-integral-item-number">8</p>
          <p class="coupon-collect-integral-item-title">收藏夹</p>
        </div>
        <div class="coupon-collect-integral-item">
          <p class="coupon-collect-integral-item-number">26</p>
          <p class="coupon-collect-integral-item-title">我的积分</p>
        </div>
      </div>
      <div class="header-bottom-msg"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
};
</script>

<style lang="less">
@tag-padding: 10px;
.my-avator {
  height: 50px;
  width: 50px;
  display: flex;
}
.my-msg {
  height: 50px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.my-msg .name {
  line-height: 25px;
  height: 25px;
  font-size: 16px;
  color: #fff;
}
.label-container {
  height: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header {
  padding: 30px 15px 30px 15px;
  background: linear-gradient(to right bottom, #ff5050 33%, #ff6464 66% , #df2000 100%);
}
.coupon-collect-integral-item{
  text-align: center;
  flex: 1;
  color: #FFF;
}
.header-bottom-msg{
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 25px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #333333;
  color: #FFF;
}
.menu-list{
  justify-content: flex-end;
}
.menu-list-item{
  justify-content: center;
  align-items: center;
  color:#FFF;
  margin-left: 15px;
}
.menu-list-item span{
  font-size: 14px;
}
.coupon-collect-integral-item-number {
  font-size: 16px;
}
.coupon-collect-integral-item-title {
  font-size: 14px;
}

</style>